<template>
  <div class="home" >
    <home-header></home-header>
	<home-swiper :swiperList="swiperList"></home-swiper>
	<!-- <home-icons :iconList="iconList"></home-icons> -->
	<home-localtion></home-localtion>
	<home-active></home-active>
	<home-hot :hotList="hotList"></home-hot>
	<home-like :likeList="likeList"></home-like>
	<home-vacation :vacationList="vacationList"></home-vacation>
  </div>
</template>

<script>
	import HomeHeader from './pages/Header'
	import HomeSwiper from './pages/Swiper'
	import HomeIcons from './pages/Icons'
	import HomeLocaltion from './pages/localtion'
	import HomeActive from './pages/active'
	import HomeHot from './pages/hot'
	import HomeLike from './pages/like'
	import HomeVacation from './pages/vacation'
	export default{
		components:{
			HomeHeader,
			HomeSwiper,
			HomeIcons,
			HomeLocaltion,
			HomeActive,
			HomeHot,
			HomeLike,
			HomeVacation
		},
		data(){
			return{
				swiperList:[],
				iconList:[],
				hotList:[],
				likeList:[],
				vacationList:[]

			}
		},
		mounted(){
			this.$http.get("/api/datahome.json")
			.then((res)=>{
				const data=res.data.data[0];
				this.swiperList=data.swiperList;
				this.iconList=data.iconList;
				this.hotList=data.hotList;
				this.likeList=data.likeList;
				this.vacationList=data.vacationList;
				
			})
		}
	}
</script>

<style scoped>
	.home{
		background-color: #f5f5f5;
	}
</style>